<!-- 系统账户列表 -->
<div class="layuimini-container">

	<div class="layuimini-main" style="padding:4px; height:96px;">
		<!-- 条件搜索  start-->
		<form class="layui-form layui-form-pane" action="">

			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-input-inline">
					<input type="text" name="phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-input-inline">
					<select name="status" lay-filter="store">
						<option value="" selected>--请选择状态--</option>
						<option value="0">停用</option>
						<option value="1">正常</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item" id="area-picker">
				<div class="layui-input-inline" style="width: 200px;">
					<select name="province" class="province-selector" lay-filter="province-1">
						<option value="">请选择省</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="city" class="city-selector" lay-filter="city-1">
						<option value="">请选择市</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="county" class="county-selector" style="z-index: 5;">
						<option value="">请选择区</option>
					</select>
				</div>

				<!-- 按钮 -->
				<div class="layui-inline">
					<button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i class="fa fa-search"></i>
						查询 </button>
					<button type="submit" class="layui-btn layui-btn-normal"><i class="fa fa-refresh"></i> 重置 </button>
				</div>
			</div>
		</form>
	</div>


	<!-- 数据表格 -->
	<div class="layuimini-main" style="padding:0 4px;">
		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
	</div>

	<!-- 定义 id="toolbarDemo"  -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i class="fa fa-pencil"></i> 新增账号 </button>
		</div>
	</script>

	<!-- 定义 id="currentTableBar" -->
	<script type="text/html" id="currentTableBar">
		<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
			<button type="button" class="layui-btn layui-btn-sm" lay-event="repassword">重置密码</button>
			{{# if(d.status == 1){ }}
							<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="disable">停用</button>
			{{# } }}
						
			{{# if(d.status == 0){ }}
				<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="disable">启用</button>
			{{# } }}
		</div>
	</script>

</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();

		//省市区
		layarea.render({
			elem: '#area-picker',
			//三级选择框每次选择时执行
			change: function(res) {
				//选择结果
				console.log(res);
			}
		});

		//对table进行初始化
		table.render({
			elem: '#currentTableId', //指定初始化的tableID
			url: 'http://localhost:8005/sncUserLogin', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			toolbar: '#toolbarDemo', //引用上面定义的工具栏按钮
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [
				[ //字段，表头
					{
						field: 'id',
						type: "checkbox",
						width: 50
					},
					{
						type: 'numbers',
						title: '序号',
						width: 50
					},
					{
						field: 'count',
						title: '账号',
						sort: true
					},
					{
						field: 'name',
						title: '姓名'
					},
					{
						field: 'phone',
						title: '联系电话'
					},
					{
						field: 'subStore',
						title: '店铺信息',
						minWidth: 320,
					},
					{
						field: 'roleDesc',
						title: '角色',
						sort: true
					},
					{
						field: 'status',
						title: '状态',
						align: "center",
						sort: true,
						templet: function(d) {
							if (d.status == 1) {
								return '正常'
							} else {
								return '停用'
							}
						}
					},
					{
						title: '操作',
						minWidth: 200,
						toolbar: '#currentTableBar',
						align: "center"
					}
				]
			],
			page: true, //是否显示分页插件
			limits: [10, 20, 30], //定义每页显示多少条记录
			limit: 10, //默认每页 显示15条
			skin: 'line'
		});





		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			console.log(data);
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			layer.alert(result, { //弹出层，显示result（转换后的json字符串）
				title: '最终的搜索信息' //弹出层的标题
			});

			//执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1
				}, //当前行是第一行
				where: {
					searchParams: result
				} //搜索条件
			}, 'data');

			return false;
		});




		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(currentTableFilter)', function(obj) {
			if (obj.event === 'add') { // 监听添加操作
				var content = miniPage.getHrefContent('page/table/add-account.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();

				//定义弹出层
				var index = layer.open({
					title: '添加账户信息',
					type: 1,
					shade: 0.2,
					maxmin: false, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: ['700px', '500px'],
					// offset: [openWH[4] + 'px', openWH[] + 'px'],
					content: content //弹出层的内容
				});
				return false;
			}
		});
		
		window.initMenu=function(){
			var Data=null;
			$.ajax({
				url : 'http://localhost:8004/sccPatient/mainStore',
				type : 'get',
				async : false,
				success: function(result){
					Data=result.data;
				}
			});
			console.log(Data);
			return Data;
		}
		//模拟角色数据
		var roleData = [{
				"roleId": "2",
				"roleName": "总店管理员"
			},
			{
				"roleId": "3",
				"roleName": "分店管理员"
			},
			{
				"roleId": "4",
				"roleName": "检测者"
			}
		];

		//监 听操作列下面的编辑和删除
		table.on('tool(currentTableFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;

			if (obj.event === 'edit') { //编辑事件
				var content = miniPage.getHrefContent('page/table/edit-account.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '编辑账户信息',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['700px', '500px'], //弹出窗尺寸，设置最小尺寸
					// offset: ['15%', '25%'], //弹出窗x,y位置
					content: content, //弹出层内容
					success: function(layero, index) { // 成功弹出后回调
						//查找弹出层子页面表单控件，并进行数据绑定
						$(layero).find("input[name='name']").val(data.name);
						$(layero).find("input[name='phone']").val(data.phone);
						$(layero).find("input[name='id']").val(data.id);
						var dianpu=data.subStore.split(" ");
						let parentMenuHtml = '<option value="0">'+dianpu[0] +'</option>';
						initMenu().forEach(function(_item){
							parentMenuHtml += '<option value="'+ _item.storeId +'">'+_item.storeName+'</option>';
						});
						$(layero).find("select[name='storeId']").html(parentMenuHtml);
						form.render("select");

						// //门店下拉列表绑值
						// let storeHtml = '';
						// storeData.forEach(function(_item) {
						// 	console.log(_item.storeName);
						// 	console.log(data.subStore);

						// 	// 判断需要对那个选项进行回显
						// 	storeHtml += '<option value="' + _item.storeId + '"';
						// 	if (_item.storeName == data.subStore) {
						// 		storeHtml += ' selected ';
						// 	}
						// 	storeHtml += '>' + _item.storeName + '</option>';
						// });
						// $(layero).find("select[name='store']").html(storeHtml);

						//角色下拉列表绑值
						let roleHtml = '';
						roleData.forEach(function(_item) {
							// 判断需要对那个选项进行回显
							roleHtml += '<option value="' + _item.roleId + '"';
							if (_item.roleName == data.roleName) {
								roleHtml += ' selected ';
							}
							roleHtml += '>' + _item.roleName + '</option>';
						});
						$(layero).find("select[name='roleId']").html(roleHtml);


						form.render(); //更新全部
					}
				});
				return false;

			} else if (obj.event === 'repassword') { //重置密码
				var content = miniPage.getHrefContent('page/table/edit_password.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '修改密码',
					type: 1,
					shade: 0.2,
					maxmin: true,
					shadeClose: true,
					area: ['700px', '500px'], //弹出窗尺寸，设置最小尺寸
					// offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content, //弹出层内容
					success: function(layero, index) { // 成功弹出后回调
						$(layero).find("input[name='account']").val(data.count);
						$(layero).find("input[name='id']").val(data.id);
					}
				});
				return false;

			} else if (obj.event === 'disable') { //禁用账户
				//1.修改当前按钮的文字与样式
				//2.修改数据库中账户的状态
				//1.修改当前按钮的文字与样式
				console.log(obj.data);
				var data = obj.data;

				if (obj.data.status == 1) {
					layer.confirm('确认停用吗?', function(index) {
						console.log(obj.data.id);
						$.ajax({
							url: 'http://localhost:8005/sncUserLogin/updSta',
							type: 'put',
							data: JSON.stringify({
								"id": obj.data.id,
								"status": 0
							}),
							contentType: "application/json;charset=UTF-8",
							success: function(result) { //后端响应成功回调函数
								layer.close(index);
								//刷新页面
								table.reload('currentTableId');
							},
							error: function(result) {}
						});
					})
				} else {
					layer.confirm('确认启用吗?', function(index) { 
						$.ajax({
							url: 'http://localhost:8005/sncUserLogin/updSta',
							type: 'put',
							data: JSON.stringify({
								"id": obj.data.id,
								"status": 1
							}),
							contentType: "application/json;charset=UTF-8",
							success: function(result) { //后端响应成功回调函数
								layer.close(index);
								//刷新页面
								table.reload('currentTableId');
							},
							error: function(result) {}
						});
					})

				}
			}
			return false;
		});
	});
</script>
